<script lang="ts">
  import { DictionaryWords, getDetail } from '@/api/dictionary';
  import { WOED_TABBAR_PAGE } from '@/constants/path';
  import { DOUBLE_STATUS } from '@/enum/common';
  import { onLoad } from '@/hooks/uniapp-composition-hooks';
  import { defineComponent, ref } from '@vue/composition-api';

  export default defineComponent({
    setup() {
      const dictionaryWords = ref<DictionaryWords>({
        id: 0,
        dictionaryId: 0,
        wordContent: '',
        wordPronunciation: '',
        wordTranslate: '',
        collectionStatus: DOUBLE_STATUS.UN_NORMAL
      });

      const playStyleAnimation = 'play 1.6s linear';
      // const translateShowStatus = ref(true);

      const playStyle = ref({
        animation: ''
      });

      const innerAudioContext = uni.createInnerAudioContext();
      function playWordSound() {
        playStyle.value.animation = playStyleAnimation;
        innerAudioContext.src = `http://dict.youdao.com/dictvoice?type=0&audio=${dictionaryWords.value.wordContent}`;
        innerAudioContext.play();
        setTimeout(() => {
          playStyle.value.animation = '';
        }, 1600);
      }

      onLoad((options: any) => {
        if (options.id) {
          getDetail(options.id).then((res) => {
            dictionaryWords.value = res.data;
          });
        }
      });

      return {
        playStyleAnimation,
        playStyle,
        dictionaryWords,
        WOED_TABBAR_PAGE,
        playWordSound
      };
    }
  });
</script>

<template>
  <view class="word-detail">
    <view class="word-card" @click.stop="() => {}" @touchmove.stop.prevent="() => {}">
      <view class="word-card-content">
        <view class="content-word">{{ dictionaryWords.wordContent }}</view>
        <view class="content-tanslate-message">
          <view class="content-tanslate">
            <view class="pronunciation">
              {{ dictionaryWords.wordPronunciation }}
            </view>
            <text class="translate">
              {{ dictionaryWords.wordTranslate }}
            </text>
          </view>
        </view>
      </view>
      <view class="content-play">
        <view class="content-play-button">
          <image :src="WOED_TABBAR_PAGE.PLAY" :style="[playStyle]" @click.stop="playWordSound" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .word-detail {
    padding: 20rpx;
    .word-card {
      height: 75vh;
      margin-top: 5vw;
      border-radius: 2vw;
      background-color: #fff;
      position: relative;
      box-shadow: 2rpx 2rpx 25rpx #dddddd;
      transition: all 0.5s;
      display: flex;
      flex-direction: column;
      padding: 10rpx 30rpx 0 30rpx;

      &-header {
        height: 60rpx;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-close {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        &-listen-body {
          display: flex;
          align-items: center;
        }

        &-listen {
          width: 32rpx;
          height: 32rpx;
        }

        &-collection {
          width: 32rpx;
          height: 32rpx;
        }
      }

      &-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .content-word {
          font-size: 44rpx;
          color: #1a1a1a;
          font-weight: bold;
          text-align: center;
        }

        .content-tanslate {
          position: relative;

          &-message {
            width: 100%;
            height: 100%;
            padding: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .pronunciation {
              text-align: center;
            }

            .translate {
              margin-top: 20rpx;
              text-align: center;
            }
          }

          .content-tanslat-cover {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .content-play {
        height: 80rpx;

        &-button {
          margin: 0 auto;
          width: 56rpx;
          height: 56rpx;
          border: 2rpx solid #515151;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            width: 48rpx;
            height: 48rpx;
            opacity: 1.1;
          }
        }
      }
    }
  }
</style>
